<template>
    <div>
        <div class="item">
            <div class="ad_info">
                <div class="poster">
                    <pub-upload-img v-model="imgUrl" class="whfull"></pub-upload-img>
                </div>

                <div v-if="pageType == 'link'" class="ad_des">
                    <div class="ad_title" :class="{placeholder: !title}" @click="editTitle('title')">
                        {{title || '填写标题'}}
                    </div>
                    <span class="btn_text" @click="editTitle('btnText')">{{ btnText || '点击查看'}}</span>
                </div>
                
                <div v-if="pageType == 'product'" class="ad_des">
                    <div class="ad_title" :class="{placeholder: !title}" @click="editTitle('title')">
                        {{title || '填写商品名称'}}
                    </div>
                    <div class="price flex-v-center">
                        ￥ <input v-model="price" type="text" placeholder="填写价格" placeholder-class="placeholder">
                    </div>
                    <span class="btn_text" @click="editTitle('btnText')">{{ btnText || '去购买'}}</span>
                </div>

                <div v-if="pageType == 'img'" class="ad_des">
                    <div class="ad_title" :class="{placeholder: !title}" @click="editTitle('title')">
                        {{title || '填写标题'}}
                    </div>
                    <div class="invite" @click="editTitle('descText')" :class="{placeholder: !descText}">{{ descText || '邀请语'}}</div>
                    <span class="btn_text" @click="editTitle('btnText')">{{ btnText || '查看'}}</span>
                </div>

                <div v-if="pageType == 'mini'" class="ad_des">
                    <div class="ad_title" :class="{placeholder: !title}" @click="editTitle('title')">
                        {{title || '填写标题'}}
                    </div>
                    <div class="price flex-v-center">
                        ￥ <input v-model="price" type="text" placeholder="填写价格" placeholder-class="placeholder">
                    </div>
                    <span class="btn_text" @click="editTitle('btnText')">{{ btnText || '点击查看'}}</span>
                </div>

            </div>
        </div>

        <div class="jump_url" v-if="pageType == 'link'">
            <p class="title"><em class="color-red">*</em>点击广告后跳转的页面链接</p>
            <input type="text" v-model="adLink" placeholder="请填写或复制粘贴您的链接" placeholder-class="placeholder">
        </div>
        <div class="jump_url" v-if="pageType == 'product'">
            <p class="title"><em class="color-red">*</em>广告点击后跳转的购买链接</p>
            <input type="text" v-model="adLink" placeholder="请填写商品的购买网址链接" placeholder-class="placeholder">
        </div>
        <div class="jump_url" v-if="pageType == 'img'">
            <p class="title">请上传图片</p>
            <div class="img_list">
                <pub-upload-img v-model="imgList" :limit="6"></pub-upload-img>
            </div>
        </div>
        <div class="jump_url" v-if="pageType == 'mini'">
            <div class="tip flex" @click="openMiniTip"> <i class="icon-shuoming mar-r5"></i> 如何复制小程序链接?</div>
            <p class="title"><em class="color-red">*</em>小程序appID</p>
            <input type="text" v-model="descText" placeholder="示例:“wx...”" placeholder-class="placeholder">
            <p class="title"><em class="color-red">*</em>小程序跳转路径</p>
            <input type="text" v-model="adLink" placeholder="示例:“/pages/.../..." placeholder-class="placeholder">
        </div>
        <div class="parse_url" v-if="pageType == 'mini'">
            <div class="parse_btn" @click="parseUrl('open')">复制链接后，点击此处粘贴</div>
        </div>
        <div class="pad30" v-if="pageType == 'mini'">
            <span class="color-999">直达小程序、商品详情页 </span>
        </div>
        <div class="pad30" v-if="pageType == 'link'">
            <span class="color-999"> 官网/微官网、H5链接 </span>
        </div>
        <div class="pad30" v-if="pageType == 'product'">
            <span class="color-999"> 淘宝/京东/抖音/拼多多、复制商品链接 </span>
        </div>
        <div class="pad30" v-if="pageType == 'img'">
            <span class="color-999"> 公众号码、小程序码、微信二维码、微信群二维码、海报、其他图片等 </span>
        </div>

        <div class="add_btn" @click="submit"> 保存 </div>

        <pub-lo-popup 
            ref="parseUrl" 
            title="粘贴" 
            type="center" 
            @confirm="parseUrl('confirm')">
            <div class="parse_url_box">
                <textarea maxlength="-1" v-model="clipData" placeholder="请将复制好的appid或者路径粘贴至输入框内解析" placeholder-class="placeholder"></textarea>
            </div>
        </pub-lo-popup>

        <pub-lo-popup 
            ref="miniCopyTip" 
            title="如何获取小程序链接"
            :showBtn="false"
            type="bottom">
            <div class="mini_copy_tip">
                <p>1、打开小程序的商品详情页</p>
                <p>2、点击右上角的分享按钮，然后点击复制页面路径</p>
                <image src="/static/images/advert/mini_tip1.png" mode="widthFix" />
                <p class="color-red">特别说明：此功能仅支持特定的引流小程序。制作引流小程序，请扫码咨询</p>
                <image src="/static/images/advert/mini_tip2.png" mode="widthFix" />
            </div>
        </pub-lo-popup>

        <pub-text-editer ref="textEditer"></pub-text-editer>
    </div>
</template>

<script>
import { getUserAdverts, editUserAdvertReq } from '@/request/ad'

export default {
    data() {
        return {
            id: '',
            pageType: 'link',
            imgUrl: '',
            title: '',
            price: '',
            btnText: '',
            descText: '',
            adLink: '',
            imgList: [],
            clipData: ''
        }
    },
    onLoad(options) {
        if(options.type) {
            this.pageType = options.type;
            uni.setNavigationBarTitle({
                title: {
                    'link': '链接广告',
                    'product': '商品广告',
                    'img': '图片广告',
                    'mini': '小程序广告',
                }[this.pageType]
            });
        } 
        if(options.id) {
            this.id = options.id;
            this.getAdDetail()
        }
    },
    methods: {
        getAdDetail() {
            getUserAdverts({id: this.id}).then(res => {
                let detail = res.data.list[0];
                this.imgUrl = detail.advertPic || '';
                this.title = detail.advertTitle || '';
                this.price = detail.showPrice || '';
                this.adLink = detail.advertUrl || '';
                this.btnText = detail.btnName || '';
                this.descText = detail.advertDecript || '';

                if(detail.advertType == '02' && detail.advertContent) {
                    this.imgList = detail.advertContent.split(',')
                }
            })
        },
        editTitle(field) {
            this.$refs.textEditer.open({
                content: this[field],
            }).then(rst => {
                this[field] = rst
            })
        },
        submit() {
            if(this.pageType == 'link') {
                if(this.adLink) {
                    if(this.adLink.indexOf('http') != 0) return this.$interact.toast('请输入正确的链接')
                }
            }
            editUserAdvertReq({
                id: this.id || void 0,
                advertType: {
                    'link': '01',
                    'product': '00',
                    'img': '02',
                    'mini': '03',
                }[this.pageType],
                advertPic: this.imgUrl,
                advertTitle: this.title,
                showPrice: this.price,
                advertUrl: this.adLink,
                btnName: this.btnText,
                advertDecript: this.descText,
                advertContent: this.imgList.join(','),
            }).then(res => {
                this.$interact.modal(res.msg).then(action => {
                    this.$navigate.back()
                })
                
            })
            
        },
        parseUrl(type) {
            if(type == 'open') {
                this.$refs.parseUrl.open()
            } else if(type == 'confirm') {
                let parseData = {}
                let clipData = this.clipData
                try {
                    parseData = JSON.parse(clipData)
                    this.adLink = parseData.fullPath
                    this.descText = parseData.appId
                    if(!this.imgUrl) this.imgUrl = parseData.mainImgUrl;
                    if(!this.title) this.title = parseData.title;
                    if(!this.price) this.price = parseData.price;
                    
                    this.$refs.parseUrl.close()
                    this.clipData = ''
                } catch(err) {
                    let appidReg = /wx[a-z0-9]+/ig
                    let appIdRes = appidReg.exec(clipData)
                    if(appIdRes) {
                        this.descText = appIdRes[0]
                    }
                    let pathReg = /(\/[a-zA-Z0-9]+)+(\?[a-zA-Z0-9=]+)?(&[a-zA-Z0-9=]+)?/ig
                    let pathRes = pathReg.exec(clipData)
                    if(pathRes) {
                        this.adLink = pathRes[0]
                    }
                    if(!appidReg && !pathRes) {
                        this.$interact.toast('无法解析，请自行输入')
                    } else {
                        this.$refs.parseUrl.close()
                    }
                }
            }
        },
        openMiniTip() {
            this.$refs.miniCopyTip.open()
        }
    }

}
</script>

<style lang="less" scoped>
.item{
    width: 100%;
    padding: 30rpx 30rpx 0;
    margin-bottom: 20rpx;
    position: relative;
    .ad_info{
        background: #fff;
        padding: 30rpx;
        display: flex;
        border: 1px solid #ddd;
        border-radius: 20rpx;
        .poster{
            width: 180rpx;
            height: 180rpx;
            margin-right: 20rpx;
        }
        .ad_des{
            flex: 1;
            height: 180rpx;
            width: 1px;
            position: relative;
            .ad_title{
                width: 100%;
                font-size: 32rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-bottom: 1px solid #ddd;
            }
            .invite, 
            .price{
                margin-top: 14rpx;
                height: 80rpx;
                width: 250rpx;
                line-height: 80rpx;
                border-bottom: 1px solid #ddd;
                input{
                    padding-left: 10rpx;
                    height: 80rpx;
                }
            }

            .btn_text{
                padding: 0 20rpx;
                height: 50rpx;
                line-height: 48rpx;
                border-radius: 25rpx;
                color: @mainColor;
                background: #fff;
                border: 1px solid @mainColor;
                font-size: 28rpx;
                text-align: center;
                position: absolute;
                bottom: 6rpx;
                right: 0;

            }
        }
    }
}

.jump_url{
    width: 100%;
    background: #fff;
    padding: 30rpx;
    position: relative;
    .title{
        height: 80rpx;
        font-size: 32rpx;
        font-weight: bold;
        line-height: 80rpx;
    }
    input{
        height: 80rpx;
        border-bottom: 1px solid #ddd;
    }
    .tip{
        position: absolute;
        right: 30rpx;
        top: 50rpx;
        font-size: 28rpx;
        color: blue;
    }
}


.add_btn{
    position: fixed;
    z-index: 10;
    bottom: 30rpx;
    left: 35rpx;
    width: 680rpx;
    height: 90rpx;
    .align(center);
    z-index: 2;
    border-radius: 50rpx; background: @mainColor;
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
}

.parse_url{
    display: flex;
    justify-content: flex-end;
    padding: 30rpx;
    .parse_btn{
        // width: 180rpx;
        height: 60rpx;
        padding: 0 20rpx;
        .align(center);
        z-index: 2;
        border-radius: 10rpx;
        background: @mainColor;
        color: #fff;
        font-size: 30rpx;
    }
}
.parse_url_box{
    width: 100%;
    padding-bottom: 30rpx;
    textarea{
        width: 600rpx;
        height: 300rpx;
        margin: 0 auto;
        border: 1px solid #eee;
        padding: 15rpx;
        border-radius: 10rpx;
    }
}

.mini_copy_tip{
    max-height: 60vh;
    overflow: auto;
    image{
        width: 80%;
        margin: 0 auto;
    }
    p{
        line-height: 40rpx;
        margin-bottom: 20rpx;
    }
}

</style>